<template>
    <div class="main" ref="main">
        <div class="user_info" :data_index="state.base_ifo.index" v-show="state.base_ifo.visiable" ref="user_info">
            <div class="avatar">
                <div class="img">
                    <img src="" alt="">
                </div>
            </div>
            <div class="name">
                <h1>{{ state.base_ifo.content.name }}</h1>
            </div>
            <div class="first">
                | 求职意向：{{ job_interest }}
            </div>
            <div class="second">
                <span>
                    {{ state.base_ifo.content.gender }}
                </span>

                <span>
                    |<i class="fa-solid fa-phone" style="margin-right: 4px;"></i>{{ state.base_ifo.content.phone }}
                </span>

                <span>
                    |<i class="fa-solid fa-envelope" style="margin-right: 4px;"></i>{{ state.base_ifo.content.email }}
                </span>

            </div>
        </div>
        <div class="educational_experience" :data_index="state.educational_experience.index"
            v-show="state.educational_experience.visiable" ref="educational_experience">
            <div class="title">
                <h3>教育经历</h3>
            </div>
            <div class="content"
                v-for="educational_experience in state.educational_experience.content.educational_experience">
                <hr class="hr-edge-weak">
                <div class="base_info">
                    <div class="info">{{ educational_experience.attend_school }}&emsp;&emsp;{{
            educational_experience.degree }}&emsp;&emsp;{{ educational_experience.major }}</div>
                    <div class="date">{{ momentFormatYear(educational_experience.begin_date) }} - {{
            momentFormatYear(educational_experience.end_date) }}</div>
                </div>
                <table>
                    <tr>
                        <td style="width: 80px; vertical-align:text-top; font-weight: 550;">主修课程：</td>
                        <td>{{ educational_experience.major_courses.map(course => ' ' + course).toString() }}</td>
                    </tr>
                    <tr>
                        <td class="gpa">成绩：</td>
                        <td>{{ educational_experience.grades }}</td>
                    </tr>
                </table>

            </div>
        </div>
        <div class="expertise" :data_index="state.expertise.index" v-show="state.expertise.visiable" ref="expertise">
            <div class="title">
                <h3>相关技能</h3>
            </div>
            <ul>
                <li v-for="expertise, index in state.expertise.content.expertises">{{ index + 1 }}. {{ expertise }} </li>
            </ul>
        </div>
        <div class="honorary_awards" :data_index="state.honorary_awards.index" v-show="state.honorary_awards.visiable"
            ref="honorary_awards">
            <div class="title">
                <h3>荣誉奖项</h3>
            </div>
            <ul>
                <li v-for="honorary_award in state.honorary_awards.content.honorary_awards">
                    <div class="date">{{ momentFormatYear(honorary_award.begin_date) }} - {{
            momentFormatYear(honorary_award.end_date) }}</div>
                    <div class="award">{{ honorary_award.awards.map(award => ' ' + award).toString() }}</div>
                </li>
            </ul>
        </div>
        <div class="project_experience" :data_index="state.project_experience.index"
            v-show="state.project_experience.visiable" ref="project_experience">
            <div class="title">
                <h3>项目经历</h3>
            </div>
            <ul>
                <li v-for="project in state.project_experience.content.project_experience">
                    <div class="project_info">
                        <hr class="hr-edge-weak">
                        <div class="project_name">{{ project.project_name }}</div>
                        <div class="project_date">{{ momentFormatYearMonth(project.begin_date) }} - {{
            momentFormatYearMonth(project.end_date) }}</div>
                        <div class="content">
                            <div class="project_abstracts">项目描述</div>
                            <p>{{ project.project_description }}</p>
                            <div class="project_stack">项目技术栈</div>
                            <p>{{ project.tech_stack }}</p>
                            <div class="project_abstracts">项目职责和贡献</div>
                            <p>
                            <ul>
                                <li v-if="typeof project.project_responsibility !== 'string'"
                                    v-for="do_item, index in project.project_responsibility">
                                    <p>{{ index + 1 }}. {{ do_item }}</p>
                                </li>
                            </ul>
                            </p>
                        </div>

                    </div>

                </li>
            </ul>
        </div>
        <div class="self_evaluation" :data_index="state.self_evaluation.index" v-show="state.self_evaluation.visiable"
            ref="self_evaluation">
            <div class="title">
                <h3>自我评价</h3>
            </div>
            <div class="content" style="padding-left: 4px;">{{ state.self_evaluation.content.self_evaluation }}</div>
        </div>
        <div class="campus_experience" :data_index="state.campus_experience.index"
            v-show="state.campus_experience.visiable" ref="campus_experience">
            <div class="title">
                <h3>校园经历</h3>
            </div>
            <ul>
                <li v-for="experience in state.campus_experience.content.campus_experience">
                    <div class="date">{{ momentFormatYear(experience.begin_date) }} - {{ momentFormatYear(experience.end_date)
                        }}</div>
                    <div class="experinece">{{ experience.experinece.map(item => ' ' + item).toString() }}</div>
                </li>
            </ul>
        </div>
        <div class="internship_experience" :data_index="state.internship_experience.index"
            v-show="state.internship_experience.visiable">
            <div class="title">
                <h3>实习经历</h3>
            </div>
            <ul>
                <li v-for="internship_info in state.internship_experience.content.internship_experience">
                    <div class="internship_info">
                        <hr class="hr-edge-weak">
                        <div class="date">{{ momentFormatYearMonth(internship_info.begin_date) }} - {{
            momentFormatYearMonth(internship_info.end_date) }}</div>
                        <div class="company">{{ internship_info.company }}</div>
                        <div class="company_base_info">
                        <div class="department">{{ internship_info.department }}</div>、
                        <div class="position">{{ internship_info.position }}</div>
                        </div>
                        <div class="content" v-for="project in internship_info.project_experience">
                            <div class="project_abstracts">参与项目:{{ project.project_name }}</div>
                            <p>{{ project.project_description }}</p>
                            <div class="project_stack">项目技术栈</div>
                            <p>{{ project.tech_stack }}</p>
                            <div class="project_abstracts">项目职责和贡献</div>
                            <p>
                            <ul>
                                <li v-for="todo, index in project.project_responsibility">
                                    <p>{{ index + 1 }}. {{ todo }}</p>
                                </li>
                            </ul>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useStore } from '../../store/store'
import { BaseInfo, CampusExperience, EducationalExperience, Expertise, HonoraryAwards, InternshipExperience, ProjectExperience, SelfEvaluation } from '../../type/typing';
import { momentFormatYear,momentFormatYearMonth } from '../../utils/moments'
const store = useStore()
const main = ref(null)
const user_info = ref(null)
const educational_experience = ref(null)
const expertise = ref(null)
const honorary_awards = ref(null)
const project_experience = ref(null)
const self_evaluation = ref(null)
const campus_experience = ref(null)

const job_interest = store.job_interest
const user_avatar = store.user_avatar
const state = ref<{
    base_ifo: BaseInfo,  // 基本信息模块
    self_evaluation: SelfEvaluation,  // 自我评价模块
    educational_experience: EducationalExperience,  // 教育经历模块
    campus_experience: CampusExperience  // 校园经历模块
    expertise: Expertise  // 相关技能模块
    honorary_awards: HonoraryAwards  // 荣誉奖项模块
    project_experience: ProjectExperience  // 项目经历模块
    internship_experience: InternshipExperience  // 实习经历

}>({
    base_ifo: store.base_info,
    self_evaluation: store.self_evaluation,
    educational_experience: store.educational_experience,
    campus_experience: store.campus_experience,
    expertise: store.expertise,
    honorary_awards: store.honorary_awards,
    project_experience: store.project_experience,
    internship_experience: store.internship_experience

})

onMounted(() => {
    init()
})

/**
 * 初始化
 */
function init() {
    changeOrder() // 调整模块顺序

}
watch(state.value, (newVal, oldVal) => {
    console.log(newVal, oldVal)
    changeOrder()
}, { deep: true })

/**
 * 调整模块顺序
 * 根据每个模块的index，调整界面上的模块顺序,并且重新渲染到界面上
 */
function changeOrder() {
    const mainDiv = main.value;
    const children = mainDiv.children;

    // 将子元素转换为数组，并根据 key 的值进行排序
    const sortedChildren = Array.from(children).sort((a, b) => {
        const keyA = parseInt(a.getAttribute('data_index'));
        const keyB = parseInt(b.getAttribute('data_index'));
        return keyA - keyB;
    });

    // 清空主元素下的所有子元素
    mainDiv.innerHTML = '';

    // 将排序后的子元素重新添加到主元素中
    sortedChildren.forEach(child => mainDiv.appendChild(child));
}

</script>

<style scoped lang="scss">
@import url('../../style/mycss/template2.scss');

.hr-edge-weak {
    border: 0;
    padding-top: 1px;
    background: linear-gradient(to right, transparent, #d0d0d5, transparent);
}
</style>